{extend name="public/public"} {block name='css'}
<style>
  .skill-area .container {
    background-color: #1f2131;
    border-radius: 5px;
    padding: 70px 100px;
    color: #fff;
  }
  @media only screen and (max-width: 991px) {
    .skill-area .container {
      padding: 40px;
    }
  }

  .skill-title {
    font-size: 16px;
  }
  @media only screen and (max-width: 991px) {
    .skill-title {
      margin-bottom: 40px;
    }
  }
  .skill-title h2 {
    color: #fff;
    font-size: 36px;
    font-weight: 400;
  }
  .skill-title a.button {
    margin-top: 20px;
  }

  .single-skill {
    margin: 5px 0;
  }
  .single-skill h4 {
    color: #fff;
    font-size: 16px;
    font-weight: 400;
  }
  .single-skill .barfiller {
    height: 7px;
    background-color: #8394a7;
    border: none;
    border-radius: 5px;
  }
  .single-skill .barfiller .fill {
    background-color: #fff !important;
    border-radius: 5px;
  }
  .single-skill .barfiller .tip {
    right: 0 !important;
    left: auto !important;
    background-color: transparent;
  }
  .single-skill .barfiller .tip::after {
    opacity: 0;
  }

  .tabs-area .tabs-nav {
  display: block;
  padding-bottom: 30px;
  overflow: hidden;
}
.tabs-area .tabs-nav li {
  width: 25%;
  padding: 0 12.5px;
  display: inline-block;
  float: left;
  position: relative;
}
@media only screen and (max-width: 991px) {
  .tabs-area .tabs-nav li {
    width: 50%;
    margin-top: -5px;
  }
}
.tabs-area .tabs-nav li a {
  text-align: center;
  color: var(--main-color);
  display: block;
  border-bottom: 2px solid var(--main-color);
  padding: 25px 0;
}
.tabs-area .tabs-nav li a::after {
  content: "";
  border: 10px solid transparent;
  position: absolute;
  top: 100%;
  left: 50%;
  opacity: 0;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.tabs-area .tabs-nav li a i {
  display: block;
  font-size: 24px;
  margin-bottom: 12px;
}
.tabs-area .tabs-nav li a span {
  font-size: 18px;
  font-weight: 700;
}
.tabs-area .tabs-nav li a.active {
  color: #fff;
  border-radius: 5px;
}
.tabs-area .tabs-nav li a.active::after {
  border-bottom-color: transparent !important;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  opacity: 1;
}

.tabs-area .tab-content {
  border: 1px solid #cad4de;
  padding: 40px;
  border-radius: 4px;
}

.about-content {
  color: #7d91aa;
  font-weight: 300;
  margin-top: 25px;
}
@media only screen and (max-width: 991px) {
  .about-content {
    margin-bottom: 20px;
  }
}
.about-content h3 {
  font-size: 24px;
  margin-bottom: 30px;
}
.about-content a.button {
  margin-top: 15px;
}
</style>
{/block} {block name="content"}
<div class="about-area sp">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <div class="about-content">
          <h3>陈广安个人开发站点</h3>
          <p>{$c['web_synopsis']}</p>
          <a href="#" class="button">查看视频</a>
        </div>
      </div>
      <div class="col-md-6">
        <div class="about-img">
          <img src="/static/web/img/about.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</div>
<div class="skill-area spb">
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <div class="skill-title">
          <h2>Our skills</h2>
          <p>Lorem ipsum dolor sit amet conse</p>
          <a href="#" class="button">See our work</a>
        </div>
      </div>
      <div class="col-md-8">
        <div class="row">
          <div class="col-sm-6 single-skill">
            <h4>HTML</h4>
            <div class="barfiller">
              <span class="tip"></span>
              <span class="fill" data-percentage="50"></span>
            </div>
          </div>
          <div class="col-sm-6 single-skill">
            <h4>PHP</h4>
            <div class="barfiller">
              <span class="tip"></span>
              <span class="fill" data-percentage="50"></span>
            </div>
          </div>
          <div class="col-sm-6 single-skill">
            <h4>JavaScript</h4>
            <div class="barfiller">
              <span class="tip"></span>
              <span class="fill" data-percentage="50"></span>
            </div>
          </div>
          <div class="col-sm-6 single-skill">
            <h4>CSS</h4>
            <div class="barfiller">
              <span class="tip"></span>
              <span class="fill" data-percentage="50"></span>
            </div>
          </div>
          <div class="col-sm-6 single-skill">
            <h4>AJAX</h4>
            <div class="barfiller">
              <span class="tip"></span>
              <span class="fill" data-percentage="50"></span>
            </div>
          </div>
          <div class="col-sm-6 single-skill">
            <h4>Database</h4>
            <div class="barfiller">
              <span class="tip"></span>
              <span class="fill" data-percentage="50"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="tabs-area spb">
  <div class="container">
    <ul class="nav tabs-nav" id="pills-tab" role="tablist">
      <li class="nav-item">
        <a
          class="nav-link active"
          id="pills-home-tab"
          data-toggle="pill"
          href="#mission"
        >
          <i class="fa fa-puzzle-piece"></i>
          <span>Our Missioin</span>
        </a>
      </li>
      <li class="nav-item">
        <a
          class="nav-link"
          id="pills-profile-tab"
          data-toggle="pill"
          href="#vision"
        >
          <i class="fa fa-binoculars"></i>
          <span>Our Vision</span>
        </a>
      </li>
      <li class="nav-item">
        <a
          class="nav-link"
          id="pills-profile-tab"
          data-toggle="pill"
          href="#funds"
        >
          <i class="fa fa-pie-chart"></i>
          <span>Investments & Fundings</span>
        </a>
      </li>
      <li class="nav-item">
        <a
          class="nav-link"
          id="pills-profile-tab"
          data-toggle="pill"
          href="#history"
        >
          <i class="fa fa-qrcode"></i>
          <span>Our History</span>
        </a>
      </li>
    </ul>
    <div class="tab-content" id="pills-tabContent">
      <div class="tab-pane fade show active" id="mission" role="tabpanel">
        <div class="row">
          <div class="col-md-6">
            <img src="/static/web/img/team9.jpg" alt="" />
          </div>
          <div class="col-md-6">
            <p>
              When I was just starting 6th grade I got my first job. Paperboy!
              Boy, was I excited. At that time I had spent a lot of time
              actually playing the video official game Paperboy disked.
            </p>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip. You would need to research online, for newspapers
              that are in your area.
            </p>
          </div>
        </div>
      </div>
      <div class="tab-pane fade" id="vision" role="tabpanel">
        <div class="row">
          <div class="col-md-6">
            <p>
              <strong
                >When I was just starting 6th grade I got my first job.
                Paperboy! Boy, was I excited. At that time I had spent a lot of
                time actually playing the video official game Paperboy
                disked.</strong
              >
            </p>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip.
            </p>
          </div>
          <div class="col-md-6">
            <p>
              When I was just starting 6th grade I got my first job. Paperboy!
              Boy, was I excited. At that time I had spent a lot of time
              actually playing the video official game Paperboy disked.
            </p>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip. You would need to research online, for newspapers
              that are in your area.
            </p>
          </div>
        </div>
      </div>
      <div class="tab-pane fade" id="funds" role="tabpanel">
        <div class="row">
          <div class="col-md-6">
            <p>
              <strong
                >When I was just starting 6th grade I got my first job.
                Paperboy! Boy, was I excited. At that time I had spent a lot of
                time actually playing the video official game Paperboy
                disked.</strong
              >
            </p>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip.
            </p>
          </div>
          <div class="col-md-6">
            <img src="/static/web/img/team9.jpg" alt="" />
          </div>
        </div>
      </div>
      <div class="tab-pane fade" id="history" role="tabpanel">
        <div class="row">
          <div class="col-md-6">
            <img src="/static/web/img/team10.jpg" alt="" />
            <br />
            <br />
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi utad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip.
            </p>
          </div>
          <div class="col-md-6">
            <p>
              <strong
                >When I was just starting 6th grade I got my first job.
                Paperboy! Boy, was I excited. At that time I had spent a lot of
                time actually playing the video official game Paperboy
                disked.</strong
              >
            </p>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip. You would need to research online, for newspapers
              that are in your area.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="spb">
  <div class="brand-area">
    <div class="container">
      <div class="row">
        <div class="col-md-3 col-6 single-brand">
          <div class="inner">
            <a href="#">
              <img src="/static/web/img/brand1.png" alt="" />
            </a>
          </div>
        </div>
        <div class="col-md-3 col-6 single-brand">
          <div class="inner">
            <a href="#">
              <img src="/static/web/img/brand2.png" alt="" />
            </a>
          </div>
        </div>
        <div class="col-md-3 col-6 single-brand">
          <div class="inner">
            <a href="#">
              <img src="/static/web/img/brand3.png" alt="" />
            </a>
          </div>
        </div>
        <div class="col-md-3 col-6 single-brand">
          <div class="inner">
            <a href="#">
              <img src="/static/web/img/brand4.png" alt="" />
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{/block} {block name='js'}
<script>
  $(".nav-active-3").addClass("current-menu-item");
</script>
{/block}
